<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的世界MOD百科 - 详细信息</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#557A46',
                        secondary: '#B87333',
                        accent: '#E67E22',
                        dark: '#1E293B',
                        light: '#F8FAFC',
                    },
                    boxShadow: {
                        'minecraft': '0 4px 0 rgba(0, 0, 0, 0.25)',
                    },
                    backgroundImage: {
                        'minecraft-bg': "url('https://picsum.photos/id/137/1920/1080')",
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .btn-minecraft {
                @apply bg-primary hover:bg-primary/80 text-white font-bold py-2 px-4 rounded-none shadow-minecraft transition-all duration-150 transform hover:-translate-y-1 hover:shadow-lg;
            }
            .card-minecraft {
                @apply bg-dark/80 text-light rounded-none border-2 border-primary/30 shadow-minecraft hover:shadow-lg transition-all duration-300 hover:-translate-y-1;
            }
            .nav-link {
                @apply text-light hover:text-accent transition-colors duration-200 font-bold;
            }
        }
    </style>
</head>
<body class="bg-minecraft-bg bg-fixed bg-cover font-inter min-h-screen flex flex-col">
<!-- 导航栏 -->
<nav class="bg-dark/90 text-white shadow-lg sticky top-0 z-50 backdrop-blur-sm">
    <div class="container mx-auto px-4 py-3">
        <div class="flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-cubes text-accent text-2xl"></i>
                <h1 class="text-xl md:text-2xl font-bold tracking-wider">我的世界MOD百科 - 管理员模块</h1>
            </div>

            <div class="hidden md:flex items-center space-x-8">
                <a href="#" class="nav-link relative group">首页
                    <span class="absolute w-0 h-0.5 bg-accent bottom-0 left-0 group-hover:w-full transition-all duration-300"></span>
                </a>
                <a href="#" class="nav-link relative group">下载管理
                    <span class="absolute w-0 h-0.5 bg-accent bottom-0 left-0 group-hover:w-full transition-all duration-300"></span>
                </a>
                <a href="#" class="nav-link relative group text-accent">详细信息
                    <span class="absolute w-full h-0.5 bg-accent bottom-0 left-0"></span>
                </a>
                <a href="#" class="nav-link relative group">MOD管理
                    <span class="absolute w-0 h-0.5 bg-accent bottom-0 left-0 group-hover:w-full transition-all duration-300"></span>
                </a>
                <a href="#" class="nav-link relative group">评论管理
                    <span class="absolute w-0 h-0.5 bg-accent bottom-0 left-0 group-hover:w-full transition-all duration-300"></span>
                </a>
                <a href="#" class="nav-link relative group">审核管理
                    <span class="absolute w-0 h-0.5 bg-accent bottom-0 left-0 group-hover:w-full transition-all duration-300"></span>
                </a>
            </div>

            <div class="md:hidden">
                <button id="menu-toggle" class="text-white focus:outline-none">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>

        <div id="mobile-menu" class="hidden mt-4 pb-2 md:hidden">
            <a href="#" class="block py-2 nav-link">首页</a>
            <a href="#" class="block py-2 nav-link">下载管理</a>
            <a href="#" class="block py-2 nav-link text-accent">详细信息</a>
            <a href="#" class="block py-2 nav-link">MOD管理</a>
            <a href="#" class="block py-2 nav-link">评论管理</a>
            <a href="#" class="block py-2 nav-link">审核管理</a>
        </div>
    </div>
</nav>

<!-- 英雄区域 -->
<header class="relative h-[60vh] flex items-center justify-center overflow-hidden">
    <div class="absolute inset-0 bg-dark/50 backdrop-blur-sm z-10"></div>
    <div class="container mx-auto px-4 z-20 text-center">
        <h1 class="text-[clamp(2rem,4vw,3rem)] font-bold text-white mb-6 text-shadow">详细信息</h1>
        <p class="text-[clamp(1rem,2vw,1.25rem)] text-light/90 max-w-2xl mx-auto">查看和管理MOD及开发者的详细信息</p>
    </div>
</header>

<!-- 主要内容区域 -->
<main class="py-16 bg-dark/80 backdrop-blur-sm">
    <div class="container mx-auto px-4">
        <!-- MOD详细信息卡片 -->
        <div class="card-minecraft mb-12 overflow-hidden">
            <div class="grid grid-cols-1 md:grid-cols-3">
                <!-- MOD封面图 -->
                <div class="md:col-span-1">
                    <img src="https://picsum.photos/id/237/600/800" alt="工业革命MOD封面" class="w-full h-full object-cover">
                </div>

                <!-- MOD基本信息 -->
                <div class="md:col-span-2 p-6">
                    <div class="flex justify-between items-start mb-6">
                        <div>
                            <h2 class="text-2xl font-bold text-white">工业革命MOD</h2>
                            <p class="text-accent font-medium">科技类 | 版本 1.2.0</p>
                        </div>
                        <button class="btn-minecraft">编辑信息</button>
                    </div>

                    <div class="mb-6">
                        <h3 class="text-xl font-bold text-white mb-2">开发者信息</h3>
                        <div class="flex items-center mb-2">
                            <img src="https://picsum.photos/id/64/100/100" alt="科技狂人团队头像" class="w-10 h-10 rounded-full mr-3">
                            <div>
                                <p class="text-white font-medium">科技狂人团队</p>
                                <p class="text-light/70 text-sm">成立于2021年 | 5名成员</p>
                            </div>
                        </div>
                    </div>

                    <div class="mb-6">
                        <h3 class="text-xl font-bold text-white mb-2">简介</h3>
                        <p class="text-light/80">工业革命MOD为我的世界添加了丰富的科技元素，包括自动化生产线、电力系统、高级机械等。玩家可以通过收集资源，搭建复杂的工业设施，实现自动化生产。该MOD注重平衡性和游戏体验，适合喜欢科技类玩法的玩家。</p>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <h3 class="text-xl font-bold text-white mb-2">基本信息</h3>
                            <ul class="text-light/80 space-y-2">
                                <li><span class="text-white font-medium">发布日期:</span> 2023-05-10</li>
                                <li><span class="text-white font-medium">最后更新:</span> 2023-10-15</li>
                                <li><span class="text-white font-medium">支持版本:</span> 1.19.2, 1.18.2</li>
                                <li><span class="text-white font-medium">下载次数:</span> 12,589</li>
                            </ul>
                        </div>

                        <div>
                            <h3 class="text-xl font-bold text-white mb-2">兼容性</h3>
                            <ul class="text-light/80 space-y-2">
                                <li><span class="text-white font-medium">前置MOD:</span> Forge API</li>
                                <li><span class="text-white font-medium">冲突MOD:</span> 无已知冲突</li>
                                <li><span class="text-white font-medium"> multiplayer支持:</span> 是</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 详细内容标签页 -->
        <div class="card-minecraft mb-12">
            <div class="border-b border-primary/30">
                <div class="flex flex-wrap">
                    <button class="px-6 py-3 text-white font-bold border-b-2 border-accent">更新日志</button>
                    <button class="px-6 py-3 text-light/70 hover:text-white">特性列表</button>
                    <button class="px-6 py-3 text-light/70 hover:text-white">使用说明</button>
                    <button class="px-6 py-3 text-light/70 hover:text-white">常见问题</button>
                </div>
            </div>

            <div class="p-6">
                <h3 class="text-xl font-bold text-white mb-4">版本更新日志</h3>

                <div class="mb-6">
                    <div class="flex justify-between items-center mb-2">
                        <h4 class="text-lg font-bold text-accent">版本 1.2.0 (2023-10-15)</h4>
                        <span class="bg-primary/30 text-light px-2 py-1 text-sm">主要更新</span>
                    </div>
                    <ul class="text-light/80 ml-5 list-disc space-y-1">
                        <li>添加了3种新的发电机类型</li>
                        <li>优化了电力系统的性能</li>
                        <li>修复了自动化生产线的bug</li>
                        <li>增加了新的合成配方</li>
                    </ul>
                </div>

                <div>
                    <div class="flex justify-between items-center mb-2">
                        <h4 class="text-lg font-bold text-accent">版本 1.1.0 (2023-08-20)</h4>
                        <span class="bg-primary/30 text-light px-2 py-1 text-sm">次要更新</span>
                    </div>
                    <ul class="text-light/80 ml-5 list-disc space-y-1">
                        <li>修复了与其他科技MOD的兼容性问题</li>
                        <li>优化了部分机械的模型</li>
                        <li>调整了部分物品的合成成本</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark/90 text-white py-8">
    <div class="container mx-auto px-4 text-center">
        <p>&copy; 2024 我的世界MOD百科 - 管理员模块. 保留所有权利.</p>
    </div>
</footer>

<script>
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    menuToggle.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });
</script>
</body>
</html>